<template>
  <el-dialog
    top="30px"
    width="800px"
    title="农业经营主体推荐表"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div id="print-wrap">
      <h3 class="text-center">推荐表</h3>
      <table class="table table-bordered vertical-align-middle">
        <tbody>
          <tr>
            <td rowspan="6" class="text-center bg-gray font-weight-bold">主体信息</td>
            <td class="text-center bg-light">主体姓名</td>
            <td colspan="3">{{ relatedData.customer_name || relatedData.customer_name }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">经营者姓名</td>
            <td style="min-width: 120px">{{ relatedData.corp_name }}</td>
            <td class="text-center bg-light">身份证号码</td>
            <td>{{ relatedData.lender_idcard }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">所在地址</td>
            <td colspan="3">{{ relatedData.address }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">项目类型</td>
            <td colspan="3">{{ enumProjectType[relatedData.project_type] }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">联系方式</td>
            <td colspan="3">{{ relatedData.mobile_no }}</td>
          </tr>
          <tr>
            <td class="text-center bg-light">生产经营范围</td>
            <td colspan="3">{{ relatedData.business_scope || '-' }}</td>
          </tr>
          <tr>
            <td rowspan="3" class="text-center bg-gray font-weight-bold">资金需求</td>
            <td class="text-center bg-light">申请资金</td>
            <td colspan="3">{{ relatedData.apply_funds }} 万元</td>
          </tr>
          <tr>
            <td class="text-center bg-light">贷款年限</td>
            <td colspan="3">{{ relatedData.load_years }} 年</td>
          </tr>
          <tr>
            <td class="text-center bg-light">主要用途</td>
            <td colspan="3">{{ relatedData.funds_use_dir || '-' }}</td>
          </tr>
          <tr>
            <td class="text-center bg-gray font-weight-bold">企业基本情况</td>
            <td colspan="4">详情见数字信息用档案卡。</td>
          </tr>
          <tr>
            <td class="text-center bg-gray font-weight-bold">推荐意见</td>
            <td class="text-center bg-light">乡镇（管理部门）意见</td>
            <td colspan="3" :class="isViewMode ? '' : 'report-input-td'">
              <textarea
                rows="5"
                class="form-control"
                v-model="recommendOpinion"
                v-if="!isViewMode"
              ></textarea>
              <p v-else style="text-indent: 2rem">
                {{ relatedData.recommend_opinion || '-' }}
              </p>
              <div class="text-right" style="">
                <div style="letter-spacing: 2rem">盖章</div>
                <!--<div  style="letter-spacing: 1.2rem">年月日</div>-->
                {{ recommendTime || '-' }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center" v-if="!isViewMode">
      <el-button class="btn-long" type="primary" @click="handleRecommend">推荐</el-button>
      <el-button class="btn-long" type="danger" @click="handleReject">不推荐</el-button>
    </div>
    <div class="text-center" v-else>
      <el-button class="btn-long" type="primary" icon="el-icon-printer" @click="handlePrint">
        打印
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { printHtml } from '@vimi/utils-tool'
import { enumProjectType } from '@/gov/plugins/enum'
export default {
  components: {},
  props: {
    visible: Boolean,
    viewMode: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      enumProjectType,
      recommendOpinion: '',
      tableName: 'customer_related',
    }
  },
  computed: {
    recommendTime() {
      return this.$utils.dateFormat(
        +this.relatedData.recommend_status === 0 ? new Date() : this.relatedData.recommend_time,
        'yyyy年MM月dd日'
      )
    },
    isViewMode() {
      return this.viewMode || +this.relatedData.recommend_status !== 0
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.recommendOpinion = this.relatedData.recommend_opinion
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleRecommend() {
      if (!this.recommendOpinion) {
        return this.$message.error('请输入意见！')
      }
      this.$utils
        .msgbox({
          message: `确定推荐?`,
          type: 'info',
          beforeClose: () =>
            this.$api.updateData(
              this.$serviceName,
              this.tableName,
              this.relatedData.customer_related_id,
              {
                recommend_opinion: this.recommendOpinion,
                recommend_status: 1,
                recommend_time: this.$utils.dateFormat(new Date()),
              }
            ),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.beforeClose()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    handleReject() {
      this.$prompt('请输入不推荐说明', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不推荐说明' : true),
      })
        .then(({ value }) => {
          this.$api
            .updateData(this.$serviceName, this.tableName, this.relatedData.customer_related_id, {
              recommend_opinion: value,
              recommend_status: 2,
              recommend_time: this.$utils.dateFormat(new Date()),
            })
            .then(() => {
              this.$message.success('操作成功！')
              this.$emit('success', false)
              this.beforeClose()
            })
            .catch(() => this.$message.error(`操作失败，请重试！`))
        })
        .catch(() => {})
    },
    handlePrint() {
      printHtml(
        document.getElementById('print-wrap').innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.bg-gray {
  background-color: $gray-200;
}
</style>
